<template>
  <div class="container">
    <!--    <div class="left-side">-->
    <!--      <div class="panel">-->
    <!--        <GlobalDataSearch></GlobalDataSearch>-->
    <!--        <PersonalToDoList></PersonalToDoList>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    <div class="right-side">-->
    <!--      <a-grid :cols="24" :row-gap="16">-->
    <!--        <a-grid-item :span="24">-->
    <!--          <Forewarning></Forewarning>-->
    <!--        </a-grid-item>-->
    <!--        <a-grid-item :span="24">-->
    <!--          <MessageReminder></MessageReminder>-->
    <!--        </a-grid-item>-->
    <!--        <a-grid-item :span="24">-->
    <!--          <Announcement></Announcement>-->
    <!--        </a-grid-item>-->
    <!--      </a-grid>-->
    <!--    </div>-->
  </div>
</template>

<script lang="ts" setup>
  import Forewarning from './components/forewarning.vue';
  import MessageReminder from './components/message-reminder.vue';
  import GlobalDataSearch from './components/global-data-search.vue';
  import PersonalToDoList from './components/personal-to-do-list.vue';
  import Announcement from './components/announcement.vue';
</script>

<script lang="ts">
  export default {
    name: 'Dashboard', // If you want the include property of keep-alive to take effect, you must name the component
  };
</script>

<style lang="less" scoped>
  .container {
    background-color: #ffffff;
    padding: 27px;
    display: flex;
    flex: 1;
    height: 100%;
  }
  .left-side {
    flex: 1;
    overflow: auto;
  }
  .right-side {
    width: 25%;
    margin-left: 10px;
  }
  .panel {
    background-color: var(--color-bg-2);
    border-radius: 4px;
  }
</style>
